<script setup lang="ts">
import { getStockLog } from "@/api/stock/condition";
import { addDialog } from "@/components/ReDialog";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import Refresh from "@iconify-icons/ep/refresh";
import dayjs from "dayjs";
import { h, onMounted, reactive, ref } from "vue";
import { useColumns } from "./columns";
import SdDocumentDetail from "./SdDocumentDetail.vue";
import WcDocumentDetail from "./WcDocumentDetail.vue";
import ZtDocumentDetail from "./ZtDocumentDetail.vue";

const { kclsColumns, sdkcColumns, ztkcColumns } = useColumns();

const props = defineProps({
  goodsId: {
    type: Number,
    default: 0
  },
  stockType: {
    type: Number,
    default: 0
  }
});

onMounted(() => {
  onSearch();
});

const form = reactive({
  businessDate: [
    dayjs().subtract(1, "month").format("YYYY-MM-DD"),
    dayjs().format("YYYY-MM-DD")
  ],
  startTime: "",
  endTime: "",
  goodsId: props.goodsId,
  stockType: props.stockType,
  pageNum: 1,
  pageSize: 10
});

const total = ref(0);
const loading = ref(false);
const goodsList = ref([]);
const onSearch = async () => {
  loading.value = true;
  let newForm = { ...form };
  if (newForm.businessDate && newForm.businessDate.length > 0) {
    newForm.startTime = newForm.businessDate[0] + " 00:00:00";
    newForm.endTime = newForm.businessDate[1] + " 23:59:59";
  }
  delete newForm.businessDate;
  let { data } = await getStockLog(newForm);
  goodsList.value = data?.records || [];
  total.value = data.total || 0;
  loading.value = false;
};

let tableColums = kclsColumns;
if (props.stockType == 1) {
  tableColums = sdkcColumns;
} else if (props.stockType == 2) {
  tableColums = ztkcColumns;
}

function handleSizeChange(val: number) {
  form.pageNum = 1;
  form.pageSize = val;
  onSearch();
}

function handleCurrentChange(val: number) {
  form.pageNum = val;
  onSearch();
}

const resetForm = () => {
  form.businessDate = [];
  onSearch();
};

/**
 * 显示库存流水 stockType 库存类型 1锁定 2在途 3完成
 * @param row
 */
const showDocumentDetail = row => {
  if (row.bizCode == "import") {
    return;
  }
  let renderPage = WcDocumentDetail;
  if (props.stockType == 1) {
    renderPage = SdDocumentDetail;
  } else if (props.stockType == 2) {
    renderPage = ZtDocumentDetail;
  }
  addDialog({
    title: "业务单据",
    props: {
      stockType: props.stockType,
      optType: row.optType,
      bizCode: row.bizCode
    },
    width: "1150px",
    sureBtnLoading: true,
    draggable: true,
    fullscreenIcon: true,
    closeOnClickModal: false,
    contentRenderer: () => h(renderPage),
    beforeSure: async done => {
      done();
    },
    beforeCancel: done => {
      done();
    }
  });
};
</script>

<template>
  <div class="goods-table">
    <el-form ref="formRef" :inline="true" :model="form" class="pl-8">
      <el-form-item label="业务日期：" prop="goodsCode">
        <el-date-picker
          v-model="form.businessDate"
          class="!w-[280px]"
          type="daterange"
          range-separator="至"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          value-format="YYYY-MM-DD"
          @change="onSearch"
        />
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          :icon="useRenderIcon('ri:search-line')"
          @click="onSearch"
        >
          搜索
        </el-button>
        <el-button :icon="useRenderIcon(Refresh)" @click="resetForm()">
          重置
        </el-button>
      </el-form-item>
    </el-form>
    <pure-table
      :loading="loading"
      row-key="id"
      align-whole="center"
      :header-cell-style="{
        background: 'var(--el-fill-color-light)',
        color: 'var(--el-text-color-primary)'
      }"
      max-height="500"
      :data="goodsList"
      :columns="tableColums"
    >
      <!-- 业务单据编号 -->
      <template #bizCode="{ row }">
        <div
          :class="
            row.bizCode == 'import'
              ? 'text-gray-500'
              : 'cursor-pointer text-blue-500'
          "
          @click="showDocumentDetail(row)"
        >
          {{ row.bizCode || "--" }}
        </div>
      </template>
    </pure-table>
    <!-- 分页 -->
    <div v-if="goodsList.length > 0" class="mt-3 flex justify-end">
      <el-pagination
        background
        :current-page="form.pageNum"
        :page-size="form.pageSize"
        :default-page-size="10"
        :page-sizes="[10, 20, 50]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>
<style lang="scss" scoped>
.goods-table {
  margin-bottom: 15px;
}
:deep(.goods-table .el-table__footer-wrapper tfoot td.el-table__cell) {
  border-top: 1px solid #efefef !important;
  background-color: #fff !important;
}
</style>
